<!--个人中心-->
<template>
  <div>
    <div>
      <el-alert
        style="background-color: #409EFF; color: #222222; font-style: unset; margin-top: 10px; margin-bottom: 20px"
        :closable="false" title="个人中心"
      />
    </div>
    <div style=" width: 70%; margin: 25px auto">
      <el-form ref="form" :model="editForm" label-width="80px" :rules="rules">
        <el-form-item label="头像" prop="image">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :action="u_url"
            :disabled="editTure"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="editForm.image" :src="editForm.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input disabled v-model="editForm.realName"></el-input>
        </el-form-item>
        <!--      <el-form-item label="昵称" prop="nickname">
                <el-input :disabled="editTure" v-model="editForm.nickname"></el-input>
              </el-form-item>-->
        <el-form-item label="用户名">
          <el-input disabled v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input disabled v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select :disabled="editTure" v-model="editForm.departmentId" autocomplete="off"
                     @change="selectDepartmentChange"
          >
            <el-option v-for="item in departmentList" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号">
          <el-input disabled v-model="editForm.nbr"></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-input disabled v-model="editForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input disabled v-model="editForm.sex"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-input disabled v-model="editForm.politicId"></el-input>
        </el-form-item>
        <el-form-item label="籍贯">
          <el-input :disabled="editTure" type="textarea" v-model="editForm.nationPlace" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input :disabled="editTure" type="textarea" v-model="editForm.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最近修改">
          <span>{{ editForm.updateTime }}</span>
        </el-form-item>
        <el-form-item>
          <el-button v-if="editTure == true" type="primary" @click="onSubmit">修改</el-button>
          <el-button v-else plain disabled type="primary" @click="onSubmit">修改</el-button>

          <el-button v-if="editTure" plain disabled type="primary" @click="editUserInfo('form')">保存</el-button>
          <el-button v-else type="primary" @click="editUserInfo('form')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import validator, { validateEMail, validatePhone } from '../../utils/validator'

export default {
  name: 'UserInfo',
  data() {
    return {
      editTure: true,
      u_url: 'http://127.0.0.1:8083/img/imgUpload',//头像上传地址
      editForm: {
        image: ''
      },
      //表单验证，需要再el-form-item 元素中增加prop属性
      rules: {
        nickname: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
        image: { required: true, message: '请上传头像', trigger: 'change' }
      },
      departmentList: [],
      selectDepartment: false,
      departmentId: ''
    }
  },

  mounted() {
    this.loadUser()
    this.loadAllDepartment() //加载部门
  },

  methods: {
    selectDepartmentChange() {
      if (this.editForm.departmentId != this.departmentId) {
        this.selectDepartment = true
      }
    },
    onSubmit() {
      this.editTure = false
    },

    //修改个人信息
    editUserInfo(form) {
      this.$refs[form].validate(
        (valid) => {
          if (valid) {
            this.axios.post('/user/update', this.editForm).then(
              (resp) => {
                if (resp.code === 200) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    onClose: () => { //关闭回调
                    }
                  })
                  this.editTure = true
                  // this.$store.commit('user/REMOVE_USER_INFO')
                  // this.$store.commit('user/SET_USER_INFO', this.editForm)
                  this.editForm = {}
                  //修改部门
                  this.departmentId = resp.data.departmentId
                  this.loadUser()
                  if (this.selectDepartment) {
                    this.$message({
                      message: '修改部门需要等待审核！',
                      type: 'info',
                      onClose: () => { //关闭回调
                      }
                    })
                  }
                }
              }
            )
          }
        }
      )
    },

    //封面上传
    handleAvatarSuccess(res, file) {
      this.form.image = this.editForm.image = 'http://127.0.0.1:8083/' + res[0]
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;
      //
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    },

    loadUser() {
      this.axios.get('/user/info').then(
        (resp) => {
          this.editForm = resp.data
        }
      ).catch(
        (resp) => {
          this.$confirm('网络异常！')
        }
      )
    },
    loadAllDepartment() {
      this.axios.post('/department/select', {}).then(resp => {
        this.departmentList = resp.data
      })
    }
  }

}

</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
